<template>
  <div>
    <mu-appbar title="SunMoon"  class="main-header">
      <mu-icon-button icon="menu" slot="left" @click="toggle()"/>
      <mu-icon-menu icon="more_vert" slot="right">
      <mu-menu-item title="明亮紫" @click="changeTheme('light')"/>
      <mu-menu-item title="蓝绿色" @click="changeTheme('teal')"/>
      <mu-menu-item title="炭灰色" @click="changeTheme('carbon')"/>
    </mu-icon-menu>
     </mu-appbar>
    <router-view class="content"/>
     <mu-drawer :open="open" :docked="false" @close="toggle()">
      <div class="left-header">
       <mu-avatar :size="90" src="http://cdn.chensunmoon.cn/avater.png" style="margin: 20px auto;"/><br>
       <span>陈明明</span>
      </div>
      <mu-list>
        <mu-list-item title="作品集"  href="http://www.chensunmoon.cn"> <mu-icon slot="left" value="inbox"/></mu-list-item>
        <mu-list-item title="GitHub"  href="https://github.com/ChenSunMoon"> <mu-icon slot="left" value="flight_takeoff"/></mu-list-item>
          <mu-divider />
        <mu-sub-header>文章分类</mu-sub-header>
        <mu-list-item title="全部"  @click="getPostBySlug('all')"/>
        <mu-list-item :title="tag.name" v-for="tag in tags" :key="tag.id"  @click="getPostBySlug(tag.slug)"/>   
      </mu-list>
    </mu-drawer>
  </div>
</template>

<script>
import light from '!raw!muse-ui/dist/theme-default.css'
import carbon from '!raw!muse-ui/dist/theme-carbon.css'
import teal from '!raw!muse-ui/dist/theme-teal.css'
export default {
  data () {
    return {
      open: false,
      tags: [],
      themes: {
        light,
        carbon,
        teal
      }
    }
  },
  created () {
    this.getTags()
    this.changeTheme(localStorage.getItem('theme') || 'light')
  },
  methods: {
    toggle (flag) {
      this.open = !this.open
    },
    getTags () {
      this.$api.tag.getTags({limit: 10})
        .then(res => {
          this.tags = res.tags
        })
    },
    getPostBySlug (slug) {
      this.$store.commit('setTagSlug', slug)
      this.open = false
    },
    changeTheme (theme) {
      this.theme = theme
      const styleEl = this.getThemeStyle()
      styleEl.innerHTML = this.themes[theme] || ''
      localStorage.setItem('theme', theme)
    },
    getThemeStyle () {
      const themeId = 'muse-theme'
      let styleEl = document.getElementById(themeId)
      if (styleEl) return styleEl
      styleEl = document.createElement('style')
      styleEl.id = themeId
      document.body.appendChild(styleEl)
      return styleEl
    }
  }
}
</script>

<style scoped lan="less">
.main-header {
   position:absolute;
   top:0px;
}
.left-header{
  height: 200px;
  width: 100%;
  background-color: aquamarine;
 text-align: center;
 background-image: url('../../assets/leftBack.png')
}
.left-header span {
  font-size: 20px;
}
.content   {
  width: 100%;
  height: calc(100vh - 60px);
  overflow: scroll;
  margin-top: 60px;
  -webkit-overflow-scrolling: touch;
  position: relative;
  user-select: none;
}
</style>
